<template>
  <div class="login-wrap">
    <div class="login-form">
      <div class="form-title">高考志愿填报模拟系统</div>
      <el-form
          v-show="!regist"
          :model="formData"
          :rules="rules"
          class="form-content"
          label-width="0px"
          ref="form"
      >
        <el-form-item prop="account">
          <el-input placeholder="账户" v-model="formData.account">
            <span slot="prepend"><i class="el-icon-user"></i></span>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
              @keyup.enter.native="submit()"
              placeholder="密码"
              type="password"
              v-model="formData.password"
          >
            <span slot="prepend"><i class="el-icon-edit"></i></span>
          </el-input>
        </el-form-item>

        <el-row>
          <el-col class="login-btn" span="12" >
            <el-button @click="showregist()" style="width: 80%" type="primary">注册</el-button>
          </el-col>

          <el-col class="login-btn" span="12">
            <el-button @click="submit()" style="width: 80%" type="success">登录</el-button>
          </el-col>
        </el-row>
      </el-form>


      <el-form v-show="regist"
               :model="formData"
               :rules="rules"
               class="form-content"
               label-width="0px"
               ref="form1"
      >
        <el-form-item prop="account">
          <el-input placeholder="账户" v-model="formData.account">
            <span slot="prepend"><i class="el-icon-user"></i></span>
          </el-input>
        </el-form-item>

        <el-form-item prop="nickName">
          <el-input placeholder="昵称" v-model="formData.nickName">
            <span slot="prepend"><i class="el-icon-user"></i></span>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
              placeholder="密码"
              type="password"
              v-model="formData.password"
          >
            <span slot="prepend"><i class="el-icon-edit"></i></span>
          </el-input>
        </el-form-item>

        <el-form-item prop="role">
          <el-select style="width: 100%" v-model="formData.role">
            <el-option v-for="role in roleOptions"
                :label="role"
                :key="role"
                :value="role">
            </el-option>
          </el-select>
        </el-form-item>

        <el-row>
          <el-col class="login-btn"  span="12"  >
            <el-button @click="showlogin()" style="width: 80%" type="primary">返回登录</el-button>
          </el-col>

          <el-col class="login-btn" span="12" >
            <el-button @click="doregist()" style="width: 80%" type="success">注册</el-button>
          </el-col>
        </el-row>

      </el-form>
    </div>
  </div>

</template>

<script>
import {register, login} from "@/api/request";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Index',
  data: function() {
    return {
      regist: false,
      formData: {
        account: "",
        password: "",
        nickName: "",
        role: "用户",
      },

      roleOptions: [
        "管理员", "用户"
      ],

      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        nickName: [
          { required: true, message: "请填写昵称", trigger: "blur" }
        ],
      }
    };
  },
  methods: {

    showregist(){
      this.regist = true
    },

    showlogin(){
      this.regist = false
    },

    submit() {
      console.log(111)
      this.$refs.form.validate(valid => {
        if (valid) {
          login(
              this.formData
          ).then(res => {
            if(res.data) {
              sessionStorage.setItem('token', res.data.token)
              sessionStorage.setItem('user', JSON.stringify(res.data.user))
              this.$router.push({ name: "index" });
            } else{
              this.$message.error("账户/密码错误");
            }
          });
        }
      });
    },

    doregist(){
      this.$refs.form1.validate(valid => {
        if (valid) {
          register(
              this.formData
          ).then(res => {
            console.log(res)
            if(res) {
              this.$message.success("注册成功" );
            } else{
              this.$message.error("账号已被注册");
            }

          });
        }
      });
    }
  }
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.form-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}

.login-form {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.form-content {
  padding: 30px 30px;
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
}

.el-radio {
  color: #fff;
}
</style>
